<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#F6F6F6',
		navigationBarTextStyle: 'black',
		backgroundColor: '#F6F6F6',
		navigationBarTitleText: '创建班级',
	},
}
</route>
<template>
	<block>
		<uni-forms ref="formRef" :rules="rules" :modelValue="formData">
			<view class="page-personal my-4">
				<view class="px-4 w-full box-border mt-4">
					<text class="text-[#303030] text-[29rpx]">地区</text>
					<uni-forms-item name="city">
						<view
							class="w-full flex justify-between items-center h-[83rpx] px-[32rpx] mt-2 box-border rounded-[30rpx] bg-white"
						>
							<view class="flex-1">{{ userInfo.city_name }}</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="px-4 w-full box-border mt-4">
					<text class="text-[#303030] text-[29rpx]">区县</text>
					<uni-forms-item name="district">
						<view
							class="w-full flex justify-between items-center h-[83rpx] px-[32rpx] mt-2 box-border rounded-[30rpx] bg-white"
						>
							<view class="flex-1">{{ userInfo.county_name }}</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="px-4 w-full box-border mt-4">
					<text class="text-[#303030] text-[29rpx]">学校</text>
					<uni-forms-item name="school">
						<view
							class="w-full flex justify-between items-center h-[83rpx] px-[32rpx] mt-2 box-border rounded-[30rpx] bg-white"
						>
							<view class="flex-1">{{ userInfo.school_name }}</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="px-4 w-full box-border mt-[145.139rpx]">
					<text class="text-[#303030] text-[29rpx]">班级</text>
					<uni-forms-item name="class_name">
						<view
							class="w-full flex justify-between items-center h-[180rpx] px-[32rpx] mt-2 box-border rounded-[30rpx] bg-white addClass"
						>
							<textarea
								placeholder="请输入班级名称"
								placeholder-class="textarea-placeholder"
								class="textarea"
								@input="textChange"
							></textarea>
							<view class="addClass_limit"
								><text :style="`color: ${currentLength > 16 ? '#F57A36' : ''}`">{{
									currentLength
								}}</text
								>/16
							</view>
						</view>
						<view
							class="text-[#303030] text-[29rpx] m-t[20rpx] m-l[20rpx] text-[#F57A36] text-[29rpx]"
							>{{ errorClassName }}</view
						>
					</uni-forms-item>
				</view>
				<view class="w-full justify-center items-center px-12 mt-8 box-border">
					<view class="w-full relative h-[105rpx]" v-if="currentClassName == ''">
						<image
							class="w-full h-full absolute left-[50%] -translate-x-[50%] top-0 z-1"
							:src="baseImg + '/class-addBnt.png'"
						></image>
						<view
							class="w-full h-full flex justify-center items-center absolute text-[#ACADAF] text-[40rpx] left-[50%] -translate-x-[50%] top-0 z-2"
							>创建班级</view
						>
					</view>
					<view class="w-full relative h-[105rpx]" v-else>
						<image
							class="w-full h-full absolute left-[50%] -translate-x-[50%] top-0 z-1"
							:src="baseImg + '/class-addBntHov.png'"
						></image>
						<view
							@tap="submit"
							class="w-full h-full flex justify-center items-center absolute text-[#F4F5EE] text-[40rpx] left-[50%] -translate-x-[50%] top-0 z-2"
							>创建班级</view
						>
					</view>
				</view>
			</view>
		</uni-forms>
	</block>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
import { ref, onMounted } from 'vue';
import { createClass } from '@/service/class';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const formRef = ref(null);
const formData = ref({
	userName: '',
	avatarUrl: '',
	city: null,
	district: null,
	school: null,
	grade: null,
	class: null,
	class_name: '',
	class_id: null,
});
const rules = ref({
	class_id: {
		rules: [
			{
				required: true,
				errorMessage: '班级不能为空',
			},
		],
	},
});

const submit = () => {
	uni.showLoading({ title: '保存中...' });
	formRef.value
		?.validate()
		.then(async res => {
			console.log('====>submit', res);
			try {
				const data = await createClass(userInfo.value.school_id, res.class_name);
				uni.hideLoading();
				if (data.status_code === 200) {
					uni.showToast({
						icon: 'none',
						title: '保存成功',
					});
					uni.switchTab({
						url: '/pages/class/index',
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: data.message,
					});
				}
			} catch (error) {
				console.log(error);
				if (error.statusCode == 400) {
					uni.showToast({
						icon: 'none',
						title: error.data.message,
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '保存失败,请重试',
					});
				}
				uni.hideLoading();
			}
		})
		.catch(err => {
			uni.hideLoading();
		});
};

const currentClassName = ref('');
const currentLength = ref(0);
const errorClassName = ref('');
const textChange = e => {
	console.log('====>textChange', e.detail.value);
	currentClassName.value = e.detail.value;
	currentLength.value = e.detail.value.length;
	formData.value.class_name = e.detail.value;
	if (currentLength.value > 16) {
		errorClassName.value = '班级名称不能超过16个字符';
	} else {
		errorClassName.value = '';
	}
};

onMounted(async () => {});
</script>
<style lang="scss">
page {
	background: #f6f6f6;
}

.addClass {
	position: relative;
	z-index: 1;
}

.textarea {
	float: left;
	width: 100%;
	height: 150rpx;
	padding: 15rpx 0;
}

.addClass_limit {
	position: absolute;
	right: 20rpx;
	bottom: 0;
	z-index: 2;
	width: auto;
	height: 60rpx;
	font-size: 28rpx;
	line-height: 60rpx;
	color: #c6c6c6;
	text-align: center;
}
</style>
<style lang="scss" scoped>
.personal-change {
	background: #34a4e2;
}
</style>
